<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 优先使用 IE 最新版本和 Chrome -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <!-- 页面描述 -->
    <meta name="description" content="不超过150个字符"/>
    <!-- 页面关键词 -->
    <meta name="keywords" content=""/>
    <!-- 网页作者 -->
    <meta name="author" content="hjb2722404, hjb2722404@gmail.com"/>
    <!-- 搜索引擎抓取 -->
    <meta name="robots" content="index,follow"/>
    <!-- 为移动设备添加 viewport -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

    <title>为canvas添加事件监听</title>
</head>
<body>
    <canvas id="canvas" width="500" height="500" style="margin-left: 400px;"></canvas>
    <script src="utils.js" type="text/javascript"></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas"),
                    mouse = utils.captureMouse(canvas);

            function add(event){
                console.log("x: " + mouse.x + ",y: " + mouse.y);
            }
            canvas.addEventListener('mousedown', add, false);

//            canvas.removeEventListener('mousedown', add, false);
            function onKeyboard(event){
                switch (event.keyCode){
                    case 38:
                        console.log("up!");
                        break;
                    case 40:
                        console.log("down");
                        break;
                    case 37:
                        console.log("left");
                        break;
                    case 39:
                        console.log("right");
                        break;
                    default:
                        console.log(event.keyCode);
                }
            }

            window.addEventListener("keydown", onKeyboard, false);
        }
    </script>
</body>
</html>